<template>
    <div class="mine">
        <div class="header">
            <van-icon name="setting" color="#fff" />
            <p class="photo">
                <van-image
                round
                width="80px"
                height="80px"
                :src="personal.value?personal.user_avatar:'https://img01.yzcdn.cn/vant/cat.jpeg'"
                />
                <span v-if='personal.value' @click='Toinformation'>{{personal.user_nickname}}</span>
                <span v-else @click='Tologin'>点击登录</span>
                <p class="user_identity" v-if='personal.value'>{{personal.user_identity}}</p>
                
                <van-icon name="arrow" color="#fff" />
            </p>
            <div class="nav">
                <van-grid :column-num="3" :border="false">
                    <van-grid-item icon="photo-o" text="我的供应" />
                    <van-grid-item icon="photo-o" text="我的采购" />
                    <van-grid-item icon="photo-o" text="我的店铺" />
                </van-grid>
            </div>
        </div>
        <div class="columns">
            <ul class="renzheng">
                <li @click='Topersonalcertificate' ><van-icon name="user-o"  /><span>实名认证</span><em>立即认证</em><van-icon name="arrow" class="right" /></li>
                <li><van-icon name="hotel-o" /><span>企业认证</span><em>立即认证</em><van-icon name="arrow" class="right" /></li>
            </ul>
             <ul class="renzheng">
                <li><van-icon name="underway-o" /><span>浏览历史</span><van-icon name="arrow" class="right" /></li>
                <li><van-icon name="balance-o" /><span>我的报价</span><van-icon name="arrow" class="right" /></li>
            </ul>
             <ul class="renzheng">
                <li><van-icon name="envelop-o" /><span>意见反馈</span><van-icon name="arrow" class="right" /></li>
                <li><van-icon name="smile-o" /><span>专属客服</span><van-icon name="arrow" class="right" /></li>
            </ul>
        </div>
    </div>
</template>

<script>
import { onBeforeMount,ref } from 'vue';
import router from "../../router/index.js"
export default {
  setup() {
    //点击登录按钮跳转到登录页
     const Tologin=()=>{
         if(window.confirm('确定跳转到登录页面么?')){
             router.push('/login')
         }
     }
    //点击跳转到个人信息页
    const Toinformation=()=>{
        router.push('/information')
    }
    const Topersonalcertificate=()=>{
        router.push('/personalcertificate')
    }
    //用来存放数据的变量
    let personal=ref({})
   
      //请求数据
    onBeforeMount(()=>{
     let obj={};
     obj.token=window.localStorage.getItem('token');
     fetch('http://www.pudge.wang:5000/api/users/get',{
        method:'POST',
        headers:{
      　　'Content-Type': 'application/json;charset=utf-8'
      　　},
       body:JSON.stringify(obj)
      }).then(response=>response.json()).then(res=>{
        if(res.status===0){
          //user_identity为身份，0为其他，1为个体种植户，2为个体养殖户，3为企业种植户，4为企业养殖户，5为超市，6为餐饮店，7为酒店，8为中间商，9为家庭农场，10为批发商，11为电商，12为食堂，13为贸易公司
          switch(res.result.user_identity){
            case 0:
              res.result.user_identity='其他'
              break;
            case 1:
              res.result.user_identity='个体种植户'
              break;
            case 2:
              res.result.user_identity='个体养殖户'
              break;
            case 3:
              res.result.user_identity='企业种植户'
              break;
            case 4:
              res.result.user_identity='个体养殖户'
              break;
            case 5:
              res.result.user_identity='超市'
              break;
            case 6:
              res.result.user_identity='餐饮店'
              break;
            case 7:
              res.result.user_identity='酒店'
              break;
            case 8:
              res.result.user_identity='中间商'
              break;
            case 9:
              res.result.user_identity='家庭农场'
              break;
            case 10:
              res.result.user_identity='批发商'
              break;
            case 11:
              res.result.user_identity='电商'
              break;
            case 12:
              res.result.user_identity='食堂'
              break;
            case 13:
              res.result.user_identity='贸易公司'
              break;
          }
         personal.value=res.result
        }
      })
   })
    return {
        personal,Tologin,Toinformation,Topersonalcertificate
    };
  },
};
</script>

<style scoped>
.mine{
    background: #f2f2f2;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 40px;
}
.header{
    width: 100%;
    height: 200px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #5ecda5;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
}
.header .van-icon{
    float: right;
}
.header .photo{
    margin-top: 50px;
    position: relative;
}
.header .photo .user_identity{
    font-size: 12px;
    position: absolute;
    left: 70%;
    top: 40%;
    transform: translateY(-50%);
    background-color: #40826a;
    color: white;
    padding: 3px;
    border-radius: 11px;
    
}
.header .photo span{
    margin-bottom: 50px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 100px;
    font-size: 20px;
}
.header .photo .van-icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
}
.header .nav{
    width: 90%;
    height: 100px;
    background: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 160px;
    box-sizing: border-box;
    padding-top: 10px;
    border-radius: 10px;
}
.mine .columns{
    margin-top: 80px;
}
.columns ul{
    background: #fff;
    border-radius: 10px;
    font-size: 15px;
    margin-bottom: 20px;
    width: 100%;
    height: 95px;
}
.columns ul li{
    width: 100%;
    height: 50%;
    line-height: 47.5px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
}
.columns ul li .right{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}
.columns ul li span{
    margin-left: 10px;
}
.columns ul li em{
    font-style: normal;
    font-size: 12px;
    display: inline-block;
    width: 50px;
    height: 20px;
    background: #999999;
    line-height: 20px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
}
.columns ul li:nth-child(1){
    border-bottom: 1px solid #ccc;
}
</style>